<!-- 提现记录   （已修改接口，需测试） -->
<template>
	<view>



		<sunui-navbar :items="tabList" lineHeight="100rpx" :isCenter="true" :currentIndex="navIndex" padding="20rpx"
			activeColor="#1253FE" :size="220" activeLineBg="#1253FE" textAlign="center" activeLineWidth="50%"
			activeDirection="center" activeLineHeight="4rpx" bgColor="#fff" @change="getChange"></sunui-navbar>


		<view class="">
			<view class="bg" :style="{ '--bg-image': `url(${ withdrawalBg})` }" v-if="navIndex==1">
				<view class="flex-between" style="height: 100%;">
					<view>
						<view class="flex-around  " style="border-bottom: 1px solid rgba(255, 255, 255, 0.12);">
							<view class="flex-column">
								<view class="font-size_30rpx margin-bottom_10rpx" style="color: #fff;">
									抵扣金余额
								</view>
								<view class="margin-bottom_30rpx font-weight_bold"
									style="color: #fff;font-size: 30rpx;">
									{{integralStatisObj.integral}}
								</view>
							</view>
							<view class="flex-column">
								<view class="font-size_30rpx margin-bottom_10rpx" style="color: #fff;">
									已抵用余额
								</view>
								<view class="margin-bottom_30rpx font-weight_bold"
									style="color: #fff;font-size: 30rpx;">
									{{integralStatisObj.deduIntegral}}
								</view>
							</view>
						</view>
						<view class="detailsContainer flex-between  margin-top_20rpx">

							<block v-for="(i, j) in integralStatList" :key="j">
								<view class="flex-column v-price" @click="toGo(i.url)">
									<view style="color: #ffffff;">{{ i.num }}</view>
									<text
										style="font-size: 24rpx;color: rgba(255, 255, 255, 0.71); margin-top: 10rpx;">{{ i.title }}</text>
								</view>

							</block>

						</view>
					</view>

				</view>
				<!-- <image src="/static/detail/组合 3027.png" mode=""></image> -->
			</view>
			<view class="bg" :style="{ '--bg-image': `url(${ withdrawalBg})` }" v-if="navIndex==0">
				<view class="flex-between" style="height: 100%;">
					<view>
						<view class="flex-between">
							<view class="flex-columns">
								<view class="font-size_30rpx margin-bottom_10rpx" style="color: #fff;">
									累计佣金收益
								</view>
								<view class="margin-bottom_30rpx font-weight_bold" style="color: #fff;font-size: 50rpx"
									v-if="brokerageStatisObj">
									{{brokerageStatisObj.brokerage?brokerageStatisObj.brokerage:'0.00'}}
								</view>
							</view>
							<view class="withdrawalBtn flex" @click="goWithdrawal()">
								去提现
							</view>
						</view>

						<view class="detailsContainer flex-between  margin-top_20rpx">

							<block v-for="(i, j) in brokerageList" :key="j">
								<view class="flex-column v-price" @click="toGo(i.url)">
									<view style="color: #ffffff;">{{ i.num }}</view>
									<text
										style="font-size: 24rpx;color: rgba(255, 255, 255, 0.71); margin-top: 10rpx;">{{ i.title }}</text>
								</view>

							</block>

						</view>

					</view>
					<view class=" flex">

					</view>
				</view>

			</view>
			<view class="flex-between" style="padding: 0rpx 30rpx 0rpx;">
				<view class="v-title flex-align-center">
					<text></text>
					<view>常用功能</view>
				</view>
				<view style="margin-top: 8rpx;">
					<picker mode="date" :value="date" :fields="currentTimeFn(currentTime)" :start="startDate"
						:end="endDate" @change="bindDateChange">
						<view class="flex-align-center-justify-start  color6">
							<view class="">
								{{ yeartime }}
								<text>-</text>
								{{ monthtime }}
								<!-- <text>-</text>
								{{dayTime}} -->
								<uni-icons type="right" color='#333' size="16"></uni-icons>
							</view>

						</view>

					</picker>
				</view>
			</view>
			<view class="display-a margin-top_30rpx margin-left_16rpx" v-if="navIndex==0">
				<view class="label" @click="getLabel(0)"
					:style="is_status == 0 ? 'color:#FFFFFF;background: #1E6CEB;' : ''">
					全部</view>
				<view class="label" @click="getLabel(1)"
					:style="is_status == 1 ? 'color:#FFFFFF;background: #1E6CEB;' : ''">
					未结算</view>
				<view class="label" @click="getLabel(2)"
					:style="is_status == 2 ? 'color:#FFFFFF;background: #1E6CEB;' : ''">
					已结算</view>
				<view class="label" @click="getLabel(3)"
					:style="is_status == 3 ? 'color:#FFFFFF;background: #1E6CEB;' : ''">
					已取消</view>





			</view>
			<view class="display-a margin-top_30rpx margin-left_16rpx" v-if="navIndex==1">

				<view class="label" @click="getLabel(1)"
					:style="selLabel == 1 ? 'color:#FFFFFF;background: #1E6CEB;' : ''">
					收益</view>
				<view class="label" @click="getLabel(2)"
					:style="selLabel == 2 ? 'color:#FFFFFF;background: #1E6CEB;' : ''">
					抵扣</view>





			</view>
			<mescroll-body ref="mescrollRef" :height="windowHeight+'rpx'" @init="mescrollInit" @down="downCallback"
				@up="upCallback" :up="upOption" :down="downOption">
				<view class="" v-if="navIndex==1" v-for="(item,index) in list" :key="index">
					<view class="withdrawalList" v-if="selLabel == 1&&item.type==1">
						<view class="padding-bottom_20rpx flex-between border-bottom-f7f7f7">
							<view class=" flex-columns">
								<view class="flex">

									<image v-if="item.way==0" :src="backend" class="imgIcon" mode=""></image>
									<image v-else-if="item.way==3" :src="prizeDraw" class="imgIcon" mode=""></image>
									<image v-else :src="item.pic_url" class="imgIcon" mode=""></image>

									<view class="flex-columns">
										<view class=" flex-start-center">
											<view class=" font-weight_bold font-overflow"
												style="font-size: 30rpx;width: 300rpx;">
												{{item.name?item.name:item.desc}}
											</view>

										</view>
										<view class="green flex font-size_24rpx margin-top_20rpx">
											{{wayStatusFn(item.way)}}
										</view>
									</view>
								</view>
							</view>
							<view class="flex-column-end">
								<view class="font-weight_bold" style="color: rgb(255, 0, 0);font-size: 30rpx;">
									￥{{item.money}}
								</view>
								<view class="margin-top_16rpx margin-top_20rpx" style="color: #999999;">
									收益明细
								</view>
							</view>
						</view>
						<view class="margin-top_20rpx flex-start-center" style="color: #999999;">

							<text
								style="font-size: 25rpx;margin-left: 10rpx;margin-bottom: 5rpx;">创建时间：{{item.create_time}}</text>
						</view>
					</view>

					<view class="expensesContainer" v-else>
						<view class="" style="color: #999999;">
							订单号：{{item.log_no}}
						</view>
						<view class="v-shop-cart flex-columns margin-top_16rpx">
							<view class="flex-align-center padding-bottom_20rpx border-bottom-f7f7f7">
								<!-- <image class="border10" :src="detailList.foods_img"></image> -->
								<image class="border10" :src="item.pic_url">
								</image>
								<view class="flex-columns v-content flex1" style="height: 148rpx;">
									<view class="flex-between">
										<!-- <view class="v-name">{{ detailList.foods_name }}</view> -->
										<view class="v-name">{{item.name}}</view>
									</view>
									<!-- 需修改样式‘上下底部对齐’ -->
									<!-- <text v-if="detailList.service_desc">周期服务：{{ detailList.service_desc }}</text> -->
									<view style="color: #888888;">规格：{{item.desc}}</view>
									<view class="flex-between">
										<view class="v-price">抵用金支出:￥{{item.money}}</view>
										<!-- <view class="viewOrder flex"></view> -->
									</view>
								</view>
							</view>
							<view class="flex-between ">
								<view class="margin-top_20rpx flex-start-center" style="color: #999999;">

									<text
										style="font-size: 25rpx;margin-left: 10rpx;margin-bottom: 5rpx;color: #3D90F7;">支出类型：{{wayStatusFn(item.way)}}</text>
								</view>
								<view class="margin-top_20rpx flex-start-center" style="color: #999999;">

									<text
										style="font-size: 25rpx;margin-left: 10rpx;margin-bottom: 5rpx;color: #757575;">创建时间：{{item.create_time}}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="" v-if="navIndex==0">
					<view class="withdrawalList" v-if="navIndex==0" v-for="(item,index) in list" :key="i">
						<view class="padding-bottom_20rpx flex-between border-bottom-f7f7f7">
							<view class=" flex-columns">
								<view class="flex">
									<view>
										<image class="imgIcon margin-top_10rpx" :src="item.avatar" mode=""></image>
									</view>
									<view class="flex-columns">
										<view class=" flex-start-center">
											<view class=" font-weight_bold" style="font-size: 34rpx;">
												{{item.nickname}}
											</view>

										</view>
										<view class=" margin-top_20rpx">
											<text style="font-size_24rpx"
												:style="{color: item.is_partner==0?'#F2A45F':'#FF0000'}">身份：{{item.is_partner==0?'普通合伙人':'超级合伙人'}}</text>
										</view>
									</view>
								</view>
							</view>
							<view class="flex-column-end">
								<view class="font-weight_bold" style="color: #333333;font-size: 34rpx;">
									￥ {{item.total}}
								</view>
								<view class="margin-top_16rpx margin-top_20rpx">
									<text :style="{color: item.is_partner==0?'#F2A45F':'#FF0000'}"
										style="font-size: 24rpx; padding: 0 5rpx;">
										{{ item.is_status==1 ? '未结算' :item.is_status==2? '已结算:':'已取消' }}￥{{ item.money }}
									</text>

								</view>
							</view>
						</view>
						<view class="flex-between">
							<view class="margin-top_20rpx flex-start-center" style="color: #999999;">

								<text
									style="font-size: 25rpx;margin-left: 10rpx;margin-bottom: 5rpx;color: #3D90F7;">收益类型：{{item.type==1?'购买软件':'升级合伙人'}}</text>




							</view>
							<view class="margin-top_20rpx flex-start-center" style="color: #999999;">

								<text
									style="font-size: 25rpx;margin-left: 10rpx;margin-bottom: 5rpx;color: #757575;">{{item.create_time}}</text>
							</view>
						</view>
					</view>



				</view>
			</mescroll-body>


		</view>
	</view>
</template>

<script>
	export default {
		data() {
			const currentDate = this.getDate({
				format: true
			});
			return {
				date: currentDate,
				brokerageIndex: uni.getStorageSync('brokerageIndex'),
				commissionStatisObj: {},
				yeartime: currentDate.split('-')[0],
				//选择的月份
				monthtime: currentDate.split('-')[1],

				// dayTime: currentDate.split('-')[2],
				currentTime: 2,
				navIndex: 0,
				brokerageList: [],

				month: '',
				year: '',
				withdrawalBg: this.$imgs.Rectangle2781,
				prizeDraw: this.$imgs.prizeDraw,
				backend: this.$imgs.backend,
				selLabel: 1,
				is_status: 0,
				integralStatisObj: {},
				tabList: [{
					name: '佣金明细',
					id: '1' //null
				}, {
					name: '抵扣金明细',
					id: '2' //null
				}, ],
				downOption: {
					auto: true
				},
				// 上拉配置项
				upOption: {
					auto: true
				},
				integralStatList: [],
				brokerageStatisObj: {},
				moneyList: [


				],
				list: [],
				startDate() {
					return this.getDate('start');
				},
				endDate() {
					return this.getDate('end');
				},

				currentTimeFn() {
					return function(currentIndex) {
						if (currentIndex == '1') {
							// 日
							return 'day';

						} else if (currentIndex == '2') {
							// 月
							return 'month';
						} else if (currentIndex == '3') {
							// 年
							return 'year';
						}
					};
				},

			};
		},

		onLoad(options) {
			if( options.navTab){
				this.navIndex = options.navTab
			}
			// this.commissionStatisFn()
			this.integralStatisFn()
			this.brokerageStatisFn()
			this.$nextTick(() => {
				this.mescroll?.resetUpScroll();
			})
		},

		onShow() {},
		computed: {
			// 订单状态 
			wayStatusFn: function() {
				return function(status) {

					let orderStatus = '';
					// status订单状态（0.待付款 1.待接单 2.已接单 3.服务中 4.已完成 5.已取消/退款)
					orderStatus =
						status == 0 ? '后台' : status == 1 ? '邀请好友' : status == 2 ? '升级超级合伙人' : status == 3 ?
						'大转盘抽奖' : '订单抵扣';



					return orderStatus;
				};
			},
			totelName: function() {
				return function(num) {
					console.log(num);
					if (num >= 10000) {
						let remainder = num % 10000;
						let quotient = Math.floor(num / 10000);
						let decimal = Math.floor(remainder / 1000);
						return quotient + '.' + decimal + '万';
					} else {
						return num.toString();
					}
				};
			}

		},
		methods: {
			goWithdrawal() {
				this.$sun.navGo('/pages/distribution/applyWithdrawal')
			},
			async upCallback(scroll) {
				let api = this.navIndex == 0 ? this.$api.logList : this.$api.integralLog

				const result = await this.$http.get({
					url: api,
					data: {
						page: scroll.num,
						uid: uni.getStorageSync('uid'),
						// 1-收入 2-支出
						type: this.selLabel,
						is_status: this.is_status,
						year: this.year,
						month: this.month,
						psize: 10


					},


				})
				if (result.errno == 0) {
					this.count = result.total
					this.mescroll.endByPage(result.data.list.length, result.totalPage);
					if (scroll.num == 1) this.list = [];
					this.list = this.list.concat(result.data.list);
				}
			},


			async integralStatisFn() {
				const result = await this.$http.get({
					url: this.$api.integralStatis,
					data: {
						// 用户id
						uid: uni.getStorageSync('uid'),


					}
				});
				if (result.errno == 0) {
					this.integralStatisObj = result.data

					this.integralStatList = [


						{
							num: this.integralStatisObj.yesterdayIntegral,
							title: '昨日收益'

						},
						{
							num: this.integralStatisObj.todayIntegral,
							title: '今日收益'

						},
						{
							num: this.integralStatisObj.getIntegral,
							title: '累计抵用金'

						}
					]
				}
			},

			async brokerageStatisFn() {
				const result = await this.$http.get({
					url: this.$api.brokerageStatis,
					data: {
						// 用户id
						uid: uni.getStorageSync('uid'),


					}
				});
				if (result.errno == 0) {
					this.brokerageStatisObj = result.data

					this.brokerageList = [

						{
							num: this.brokerageStatisObj.yesterdayGet,
							title: '昨日收益'

						},
						{
							num: this.brokerageStatisObj.todayGet,
							title: '今日收益'

						},
						{
							num: this.brokerageStatisObj.allGet,
							title: '累计收益'

						}
					]


				}
			},



			async commissionStatisFn() {
				const result = await this.$http.get({
					url: this.$api.commissionStatis,
					data: {
						// 用户id
						uid: uni.getStorageSync('uid'),


					}
				});
				if (result.errno == 0) {
					this.commissionStatisObj = result.data

					this.moneyList = [

						{
							num: this.commissionStatisObj.alreadyCommission,
							title: '累计提现'

						},
						{
							num: this.commissionStatisObj.todayCommission,
							title: '今日提现'

						},
						{
							num: this.commissionStatisObj.monthCommission,
							title: '本月提现'

						}
					]
				}
			},
			// 日期获取
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				// let day = date.getDate();
				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;
				// day = day > 9 ? day : '0' + day;

				return `${year}-${month}`;

			},

			bindDateChange(e) {
				// console.log( e)

				// 	this.createTime = e.detail.value
				console.log(e.detail.value)
				const [year, month, day] = e.detail.value.split('-');

				console.log("Year:", year);
				this.year = year
				this.month = month
				this.yeartime = year
				//选择的月份
				this.monthtime = month

				// this.dataFilter = e.target.value;
				this.$nextTick(() => {
					this.mescroll?.resetUpScroll();
				})

			},
			getChange(e) {
				console.log(e)
				this.navIndex = e
				this.$nextTick(() => {
					this.mescroll?.resetUpScroll();
				})
			},
			getLabel(index) {

				if (this.navIndex == 0) {
					this.is_status = index;

				} else {
					this.selLabel = index;
				}
				this.$nextTick(() => {
					this.mescroll?.resetUpScroll();
				})

			},
		}
	};
</script>

<style>
	page {}
</style>
<style lang="less" scoped>
	.v-title {


		text {
			width: 10rpx;
			height: 24rpx;
			border-radius: 138rpx;

			background: rgb(0, 114, 255)
		}

		view {
			margin-left: 10rpx;
			font-size: 34rpx;
			font-weight: bold;
		}
	}

	.expensesContainer {
		border-radius: 10rpx;

		background: rgb(255, 255, 255);
		padding: 20rpx;
		margin: 0 30rpx;
		margin-top: 40rpx;

		.v-shop-cart {

			border-bottom: 2rpx solid #f7f7f7;

			image {
				width: 140rpx;
				height: 140rpx;
				margin-right: 20rpx;
			}

			.v-content {
				.v-name {
					font-size: 32rpx;
					font-weight: bold;
				}

				text {
					color: #8f8f8f;
					// padding: 10rpx 0;
					padding: 10rpx 0 16rpx;
				}

				.v-price {
					color: #FF0000;
					font-size: 28rpx;
				}

				.viewOrder {
					color: #666666;
					border-radius: 12rpx;
					width: 132rpx;
					font-size: 26rpx;
					height: 52rpx;
					background: rgb(245, 245, 245);
				}
			}
		}
	}

	.withdrawalList {


		border-radius: 10rpx;

		background: rgb(255, 255, 255);
		padding: 30rpx 30rpx;
		margin: 0 30rpx;
		margin-top: 40rpx;

		.imgIcon {
			width: 75.78rpx;
			height: 75.78rpx;
			margin-right: 15rpx;
			border-radius: 50%;
		}

		.green {
			border-radius: 8rpx;
			min-width: 156rpx;
			max-width: 190rpx;
			padding: 10rpx;
			background: rgba(9, 186, 7, 0.1);
			color: rgb(49, 169, 82);

		}

		.blue {
			border-radius: 8rpx;
			width: 92rpx;
			height: 38rpx;
			background: #F5F5F5;
			color: #999999;
			margin-left: 15rpx;
		}

		.red {
			border-radius: 8rpx;
			width: 92rpx;
			height: 38rpx;
			background: #FF2B2B;
			color: #fff;
			margin-left: 15rpx;
		}
	}

	.bg {
		background-repeat: no-repeat;
		height: 300rpx;
		border-radius: 20rpx;
		padding: 12rpx;
		background-image: (var(--bg-image));
		background-size: cover;
		margin: 30rpx;
		padding: 30rpx;

		.withdrawalBtn {
			border-radius: 200rpx;
			width: 142rpx;
			height: 68rpx;
			color: #2870FE;
			background: rgb(255, 255, 255);
		}

		.detailsContainer {
			width: 642rpx;
			border-radius: 20rpx 20rpx 0rpx 0rpx;

			.v-price {
				color: #fff;
				// margin-bottom: 48rpx;
				width: calc(100% / 3);

				view {
					color: #fff;
					font-size: 30rpx;
					margin-bottom: 10rpx;
				}
			}

		}
	}

	.label {
		background-color: #ECECEC;
		color: #A1A1A1;
		border-radius: 10rpx;
		padding: 8rpx 16rpx;
		display: inline-block;
		margin-left: 20rpx;
	}
</style>